<script  lang="ts" setup>
/**
 * useAsyncState是一个用于管理异步状态的自定义钩子函数
 *  1、我们需要定义一个变量来储存一部操作的结果
 *  2、还需要定义一个一个变量来储存异步操作的加载状态
 *  3、还需要定义一个函数来执行异步操作
 *  当异步操作开始时，我们将loading设置为true,当异步操作结束时，我们需要将loading设置为false,
 *  当异步操作操作成功时，我们需要将结果赋值给储存结果放入变量
 */

 import { ref,  Ref } from 'vue';

interface UseAsyncStateReturnType<T> {
    state: Ref<T>
    loading: Ref<boolean>
    execute: () => void
  }
 
/**
 * 响应式异步状态管理
 * @param {() => Promise<T>} fn
 * @param {T} initialValue
 * @returns {UseAsyncStateReturnType<T>}
 */
export function useAsyncState<T>(
    fn: () => Promise<T>,
    initialValue: T
  ): UseAsyncStateReturnType<T> {
    // 用于保存异步状态的 ref，默认为初始值
    const state = ref<T>(initialValue)
    // loading 状态，默认为 false
    const loading = ref<boolean>(false)
  
    async function execute() {
      // 将 loading 状态设置为 true
      loading.value = true
      try {
        const data = await fn()
      } finally {
        // 将 loading 状态设置为 false
        loading.value = false
      }
    }
  
    return {
      state,
      loading,
      execute
    }
  }
  
</script>